<!--新建一课-->
<template>
  <div class="class_management_container">
    <div class="search_box">
      <div  class="btn btn_add" @click="showPopup('ruleForm')">
        <i class="el-icon-plus"></i>
        <span class="btn_txt">新建一课</span>
      </div>
      
    </div>
    
    <div class="table_box">
      <adminTable :tableHead="tableHead" :tableData="tableData"></adminTable>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.curPage"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalRows">
      </el-pagination>
    </div>

    <transition name="el-fade-in-linear">
      <div class="popup-container" v-show="popupState.showStatus">
        <div class="popup">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false"></i>
          <div class="title">{{popupState.popupName}}</div>

          <div class="content">
            <el-form :model="formData" ref="ruleForm" :disabled="popupState.popupName == '教室详情'"  :inline="true"  label-position="left"
               class="form">
              <div style="overflow:hidden">
                
                <el-form-item label="课程名称 : "  size="small" class="">
                  <el-input v-model="formData.subjectName" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="所属类别 : "  size="small" class="">
                  <el-select @change="changeClass" v-model="formData.subjectCategory" >
                    <el-option  label="基础知识" value="jczs"></el-option>
                    <el-option  label="能力拓展" value="nltz"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="所属科目 : "  size="small" >
                  <el-select  v-model="formData.subjectKemu" >
                    <el-option v-for="(item,key) in subjectList" :key="key" :label="item.subjectName" :value="item.subjectCode">
                    </el-option>
                  </el-select>
                </el-form-item>

                <div class="clear"></div>

                <h4 style="margin-bottom: 20px;">课程内容</h4>

                <!-- <div v-if="popupState.popupName == '新建一课'">
                  <el-radio v-model="formData.fileType" label="audio">图片音频课</el-radio>
                  <el-radio v-model="formData.fileType" label="video">视频课</el-radio>
                </div> -->

                
                <ul class="class_list">
                  <li class="class_item" v-for="(item, index) in formData.bmOnlineSubjectContents" :key="index">
                    <span class="fl">{{index + 1}}.</span>
                    <div class="fl" style="width: 97%;">
                      <div class="radio_box">
                        <el-radio v-model="item.fileType" label="video">视频课</el-radio>
                        <el-radio v-model="item.fileType" label="audio">图片音频课</el-radio>
                      </div>

                      <!-- 视频 -->
                      <div class="video_box" v-if="item.fileType == 'video'" style="margin-top: 15px">
                        <uploadAliyun
                          class="fl audio_uploader"
                          :actionType="'CreateUploadVideo'"
                          @uploadSuccess="(data) => uploadSuccess(data, item,  '上传音频')"
                          :messageTxt="item.voiceName || '上传视频'">
                        </uploadAliyun>

                        <div class="clear"></div>

                        <el-checkbox style="margin-top: 5px;" @change="(e) => changeInteractive(e, item)" v-model="item.hasInteractive">交互</el-checkbox>

                        <div v-if="item.hasInteractive">
                          <div class="interactive_box"
                            v-for="(interactiveItem, interactiveIndex) in item.bmOnlineSubjectContentExitList"
                            :key="interactiveIndex">
                            <div class="question_img">
                              <span class="fl">题干图片：</span>
                              <uploadAliyun
                                class="fl"
                                style="margin-right: 20px;"
                                :actionType="'CreateUploadImage'"
                                :imgUrl="interactiveItem.questionImageFileUrl"
                                @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'questionImageFileUrl')"
                                :messageTxt="'questionImageFileUrl'">
                              </uploadAliyun>
                              <div class="clear"></div>
                            </div>

                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.firstFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'firstFile')"
                              :messageTxt="'firstFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.secondFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'secondFile')"
                              :messageTxt="'secondFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.thirdFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'thirdFile')"
                              :messageTxt="'thirdFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.fourthFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'fourthFile')"
                              :messageTxt="'fourthFileId'">
                            </uploadAliyun>

                            <!-- <div class="fl add_answer_img_box">
                              <span v-if="interactiveItem.showAnswerImgNumber != 2" @click="addAnswerImgNum(interactiveItem, 'add')">-</span>
                              <span v-if="interactiveItem.showAnswerImgNumber != 4" @click="addAnswerImgNum(interactiveItem, 'delete')">+</span>
                            </div> -->
                            
                            <uploadAliyun
                              class="fl"
                              :actionType="'CreateUploadVideo'"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem,  '上传交互音频')"
                              :messageTxt="interactiveItem.answerVoice || '上传交互音频'">
                            </uploadAliyun>
                            
                            

                            <el-form-item label="正确答案 : " style="width: 175px" prop="trueAnswer" size="small" class="">
                              <!-- <el-input v-model="interactiveItem.trueAnswer" autocomplete="off" ></el-input> -->
                              <el-select v-model="interactiveItem.trueAnswer" @change="(e) => changeAnswer(interactiveItem, e)">
                                <el-option label="A" value="A"></el-option>
                                <el-option label="B" value="B"></el-option>
                                <el-option label="C" value="C"></el-option>
                                <el-option label="D" value="D"></el-option>
                              </el-select>
                            </el-form-item>

                            <div class="fl add_sub">
                              <span @click="addDelete(item.bmOnlineSubjectContentExitList, interactiveIndex, 'delete')">删除本交互</span>
                              <span @click="addDelete(item.bmOnlineSubjectContentExitList, interactiveIndex, 'add')" v-if="interactiveIndex == item.bmOnlineSubjectContentExitList.length - 1">添加新交互</span>
                            </div>
                          </div>
                        </div>
                        
                        <h5 style="color: red; cursor: pointer; display:inline-block;" @click="deleteClassItem(index)">删除本条</h5>
                      </div>

                      <!-- 图片音频 -->
                      <div class="input_box" v-if="item.fileType == 'audio'" style="margin-top: 15px">
                        <uploadAliyun
                          class="fl"
                          :actionType="'CreateUploadImage'"
                          style="margin-right: 20px;"
                          :imgUrl="item.imageUrl"
                          @uploadSuccess="(data) => uploadSuccess(data, item,  'imageUrl')"
                          :messageTxt="item.voiceName || '上传大图'">
                        </uploadAliyun>

                        <uploadAliyun
                          class="fl audio_uploader"
                          :actionType="'CreateUploadVideo'"
                          @uploadSuccess="(data) => uploadSuccess(data, item,  '上传音频')"
                          :messageTxt="item.voiceName || '上传音频'">
                        </uploadAliyun>

                        <div class="clear"></div>

                        <el-checkbox style="margin-top: 5px;" @change="(e) => changeInteractive(e, item)" v-model="item.hasInteractive">交互</el-checkbox>

                        <div v-if="item.hasInteractive">
                          <div class="interactive_box"
                            v-for="(interactiveItem, interactiveIndex) in item.bmOnlineSubjectContentExitList"
                            :key="interactiveIndex">
                            <div class="question_img">
                              <span class="fl">题干图片：</span>
                              <uploadAliyun
                                class="fl"
                                style="margin-right: 20px;"
                                :actionType="'CreateUploadImage'"
                                :imgUrl="interactiveItem.questionImageFileUrl"
                                @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'questionImageFileUrl')"
                                :messageTxt="'questionImageFileUrl'">
                              </uploadAliyun>
                              <div class="clear"></div>
                            </div>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.firstFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'firstFile')"
                              :messageTxt="'firstFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.secondFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'secondFile')"
                              :messageTxt="'secondFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.thirdFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'thirdFile')"
                              :messageTxt="'thirdFileId'">
                            </uploadAliyun>
                            <uploadAliyun
                              class="fl"
                              style="margin-right: 20px;"
                              :actionType="'CreateUploadImage'"
                              :imgUrl="interactiveItem.fourthFile"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem, 'fourthFile')"
                              :messageTxt="'fourthFileId'">
                            </uploadAliyun>
                            
                            <uploadAliyun
                              class="fl"
                              :actionType="'CreateUploadVideo'"
                              @uploadSuccess="(data) => uploadSuccess(data, interactiveItem,  '上传交互音频')"
                              :messageTxt="interactiveItem.answerVoice || '上传交互音频'">
                            </uploadAliyun>
                            
                            

                            <el-form-item label="正确答案 : " style="width: 175px" prop="trueAnswer" size="small" class="">
                              <!-- <el-input  v-model="interactiveItem.trueAnswer" autocomplete="off" ></el-input> -->
                              <el-select v-model="interactiveItem.trueAnswer">
                                <el-option label="A" value="A"></el-option>
                                <el-option label="B" value="B"></el-option>
                                <el-option label="C" value="C"></el-option>
                                <el-option label="D" value="D"></el-option>
                              </el-select>
                            </el-form-item>

                            <div class="fl add_sub">
                              <span @click="addDelete(item.bmOnlineSubjectContentExitList, interactiveIndex, 'delete')">删除本交互</span>
                              <span @click="addDelete(item.bmOnlineSubjectContentExitList, interactiveIndex, 'add')" v-if="interactiveIndex == item.bmOnlineSubjectContentExitList.length - 1">添加新交互</span>
                            </div>
                          </div>
                        </div>
                        
                        <h5 style="color: red; cursor: pointer; display:inline-block;" @click="deleteClassItem(index)">删除本条</h5>
                      </div>

                      
                    </div>
                    <div class="clear"></div>
                  </li>
                </ul>

                
                <!-- <ul class="class_list" >
                  <li class="class_item" v-for="(item, index) in formData.bmOnlineSubjectContents" :key="index">
                    <span class="fl">{{index + 1}}.</span>
                    
                  </li>
                </ul> -->
                

                <span class="addClassItem" @click="addClassItem">添加</span>
                
              </div>

            </el-form>

            <div class="btn_box">
              <div class="btn btn_add" v-if="popupState.popupName == '新建一课'" @click="submitAdd('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>

              <div class="btn btn_add" v-if="popupState.popupName == '编辑'" @click="submitEdit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style>
.interactive_box .el-form-item {
  margin-bottom: 0 !important;
  flex-wrap: wrap;
  margin-left: 20px;
}
.class_management_container .popup .school_list .school_item .el-form-item--small.el-form-item  {
  margin-bottom: 0;
  margin: 15px 0;
}
.class_management_container .popup .school_list .school_item .el-form-item--small.el-form-item label {
  width: 60px !important;
}

.class_management_container .popup .el-input--small {
  width: 100%;
}
.class_management_container .popup .el-form-item--mini.el-form-item, 
.class_management_container .popup .el-form-item--small.el-form-item {
  margin-right: 20px;
  width: 30.5%;
  margin-bottom: 25px;
}
.class_management_container .popup .el-form-item__content {
  width: calc(100% - 90px)
}

.class_management_container .avatar-uploader {
  margin-right: 20px;
}
.class_management_container .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.class_management_container .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.class_management_container .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.class_management_container .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>

<style scoped>
.question_img {
  display: block;
  width: 100%;
  margin-bottom: 15px;
}
.add_answer_img_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.add_answer_img_box span {
  font-size: 18px;
  color: #77A4FF;
  cursor: pointer;
}
/* .img_uploader:after{
  content: '+';
  display: inline-block;
  font-size: 35px;
  color: #77A4FF;
  font-weight: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} */

.interactive_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
  background: #f0f0f0;
  padding: 10px;
  box-sizing: border-box;
}
.class_item {
  /* display: flex; */
  padding-bottom: 10px;
  margin-top: 20px;
  border-bottom: 1px dashed #ccc;
}
.class_item span {
  margin-right: 20px;
}
.addClassItem {
  font-size: 20px;
  margin-top: 20px;
  display: inline-block;
  cursor: pointer;
}


.class_management_container .btn_add i {
  margin-right: 5px;
  margin-left: 10px;
}

.el-icon {
  cursor: pointer;
  color: #77A4FF;
}
.school_list .school_item {
  background: #F0F2F5;
  padding: 0 0 0 20px !important;
  box-sizing: border-box;
  margin-bottom: 10px;;
}
.add_sub {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 50px; */
}
.add_sub span {
  font-size: 12px;
  color: #77A4FF;
  cursor: pointer;
}
.add_sub span:first-child {
  margin-right: 30px;
}

.btn_box {
  margin-top: 20px;
}
.popup .content {
  padding-top: 30px;
}
</style>

<script>
import adminTable from '@/components/assembly/adminTable'
import upLoadFile from '@/components/assembly/upLoadFile'
import uploadAliyun from '@/components/assembly/uploadAliyun'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("addClass");
export default {
  name: 'addClass',
  data() {
    return {
      classId: '',
      subjectList: [],
      hasInteractive: false,
      popupState: {
        showStatus: false,
        popupName: '新建一课',
      },
      page: {
        curPage: 1,
        pageSize: 10,
        totalRows: 0,
      },
      formData: {
        subjectName: '',
        subjectCategory: '',
        subjectKemu: '',
        fileType: 'video',
        bmOnlineSubjectContents: [
          {
            hasInteractive: true,
            fileType: 'video',
            // imageUrl: '',
            // firstFileId: '',
            // secondFileId: '',
            voiceName: '',
            answerVoice: '',
            trueAnswer: '',
            bmOnlineSubjectContentExitList: [
              {
                questionImageFile: '',
                firstFileId: '',
                secondFileId: '',
                thirdFileId: '',
                fourthFileId: '',
                showAnswerImgNumber: 2,
                sort: 1,
                trueAnswer: '',
              },
            ]
          }
        ],
      },

      tableHead: {
        // border: true,
        operation_width: '150px',
        setFunction: [
          {
            showState: "0",
            hideKey: "showUpdate",
            fun: this.tableEdit,
            name: "编辑"
          },
          {
            showState: "0",
            hideKey: "showDelete",
            fun: this.tableDelete,
            name: "删除"
          },
        ],
        data: [
          {
            name: '课程名称',
            key: 'subjectName',
            align: 'center',
          },
          {
            name: "所属类别",
            key: "subjectCategory",
            align: "center",
            filter: {
              'jczs': '基础知识',
              'nltz': '能力拓展',
            }
          },
          {
            name: "所属科目",
            key: "subjectKemu",
            align: "center",
            filter: {
              pinyin: '拼音',
              shizi: '识字',
              jisuan: '计算',
              yingyu: '英语',
              shizi: '识字',
              tzyd: '拓展阅读',
              sxsw: '数学思维',
              jyzzl: '精英专注力',
              hbyd: '绘本阅读',
              kxxsy: '科学小实验',
              cyms: '创意美术',
              cygs: '成语故事',
            }
          },
        ]
      },
      tableData: [],

      schoolList: [],
      powerSchoolList: [],
      subject1: [
        {
          subjectName: '拼音',
          subjectCode: 'pinyin',
        },
        {
          subjectName: '识字',
          subjectCode: 'shizi',
        },
        {
          subjectName: '计算',
          subjectCode: 'jisuan',
        },
        {
          subjectName: '英语',
          subjectCode: 'yingyu',
        },
      ],
      subject2: [
        {
          subjectName: '拓展阅读',
          subjectCode: 'tzyd',
        },
        {
          subjectName: '数学思维',
          subjectCode: 'sxsw',
        },
        {
          subjectName: '绘本阅读',
          subjectCode: 'hbyd',
        },
        {
          subjectName: '科学小实验',
          subjectCode: 'kxxsy',
        },
        {
          subjectName: '精英专注力',
          subjectCode: 'jyzzl',
        },
        {
          subjectName: '创意美术',
          subjectCode: 'cyms',
        },
        {
          subjectName: '成语故事',
          subjectCode: 'cygs',
        },
      ]

    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    
    this.initData();
  },
  
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    addClassItem() {
      let obj = {
        hasInteractive: false,
        imageUrl: '',
        firstFileId: '',
        secondFileId: '',
        voiceName: '',
        answerVoice: '',
        fileType: 'video',
        bmOnlineSubjectContentExitList: [
          {
            questionAudioFile: '',
            firstFileId: '',
            secondFileId: '',
            thirdFileId: '',
            fourthFileId: '',
          },
        ]
      }

      this.formData.bmOnlineSubjectContents.push(obj)
    },

    deleteClassItem(index) {
      if(this.formData.bmOnlineSubjectContents.length == 1) {
        return false
      }
      this.formData.bmOnlineSubjectContents.splice(index, 1);
    },

   

    uploadSuccess(data, item, type) {

      switch (type) {
        case '上传交互音频':
          item.answerVoice = data.fileName;
          item.questionAudioFile = data.VideoId;
          break;
        case '上传音频':
          item.voiceName = data.fileName;
          item.contentAudioFile = data.VideoId;
          break;
        case 'imageUrl':
          item.contentImageFile = data.ImageId
          this.getImgUrlByAliId(data, item, type)
          break;
        case 'questionImageFileUrl':
          item.questionImageFile = data.ImageId
          console.log(item);
          this.getImgUrlByAliId(data, item, type)
          break;
        case 'firstFile':
          item.firstFileId = data.ImageId
          console.log(item);
          this.getImgUrlByAliId(data, item, type)
          break;
        case 'secondFile':
          item.secondFileId = data.ImageId
          this.getImgUrlByAliId(data, item, type)
          break;
        case 'thirdFile':
          item.thirdFileId = data.ImageId
          this.getImgUrlByAliId(data, item, type)
          break;
        case 'fourthFile':
          item.fourthFileId = data.ImageId
          this.getImgUrlByAliId(data, item, type)
          break;
      
        default:
          break;

        
      }

      this.$forceUpdate();

    },
    getImgUrlByAliId(data, item, type) {
      this.formGet({
        API: 'getImageInfoData',
        data: {
          imageId: data.ImageId,
        }
      }).then(res => {
        if(res.imageInfo) {
          let url = res.imageInfo.url;
          item[type] = url;
          this.$forceUpdate();
        }
      });
      
    },

    


    showPopup(formName) {
      this.popupState = {
        showStatus: true,
        popupName: '新建一课',
      };

      this.formData.bmOnlineSubjectContents = [{
        hasInteractive: false,
        imageUrl: '',
        firstFileId: '',
        secondFileId: '',
        voiceName: '',
        answerVoice: '',
        fileType: 'video',
        bmOnlineSubjectContentExitList: [
          {
            questionImageFile: '',
            firstFileId: '',
            secondFileId: '',
            thirdFileId: '',
            fourthFileId: '',
            questionAudioFile: '',
            sort: 1,
          },
        ]
      }],
      this.$refs[formName].resetFields();   // 初始化
      
    },

    initData(searchForm) {
      let data = {}
      data.curPage = this.page.curPage;
      data.pageSize = this.page.pageSize;
      // data.accountId = this.jwtAuth.accountId;
      // data.menuId = this.$route.name;
      

      this.post({
        API: 'selectBmOnlineSubjectPageList',
        data: data
      }).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.page = res.page;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    

    // 新增提交
    submitAdd(formName) {
      let data = {}
      Object.assign(data, this.formData)

      this.formData.bmOnlineSubjectContents.forEach((item, index) => {
        if(item.hasInteractive) {
          item.isInteractive = '1'
        }else{
          item.isInteractive = '0'
        }
        item.sort = index + 1;

        item.bmOnlineSubjectContentExitList.forEach((interactiveItem, interactiveIndex) => {
          interactiveItem.sort = interactiveIndex + 1
        })
      })
      data.bmOnlineSubjectContents = this.formData.bmOnlineSubjectContents;
      // data.fileType = this.fileType;

      
      console.log(data)
      // return false;

      this.post({
        API: 'insert',
        data: data
      }).then(res => {
        this.$message.success('新建成功')
        this.popupState.showStatus = false;
        this.initData();
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 表格编辑 回显
    tableEdit(rowData) {
      this.classId = rowData.row.subjectId;
      let data = {
        id: this.classId,
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.popupState = {
          popupName: '编辑',
          showStatus: true,
        }
        // this.$refs['ruleForm'].resetFields();
        if(!res.fileType) {
          res.fileType = 'audio'
        }
        
        this.formData = res;

       
        
        this.changeClass(res.subjectCategory)

        this.formData.bmOnlineSubjectContents = res.bmOnlineSubjectContents

        this.formData.bmOnlineSubjectContents.forEach(item => {
          if(item.isInteractive == 0) {
            this.$set(item, 'hasInteractive', false)
            // item.hasInteractive = false;
          }else{
            this.$set(item, 'hasInteractive', true)
            // item.hasInteractive = true;
          }

          if(!item.fileType) {
            // item.fileType == 'audio';
            this.$set(item, 'fileType', 'audio')
          }
          
          if(item.contentImageFile) {
            let data = {
              ImageId: item.contentImageFile
            }
            this.getImgUrlByAliId(data, item, 'imageUrl');
          }

          if(item.bmOnlineSubjectContentExitList) {
            item.bmOnlineSubjectContentExitList.forEach((interactiveItem, interactiveIndex) => {
              console.log(interactiveItem)
              if(interactiveItem.questionImageFile) {
                let data = {
                  ImageId: interactiveItem.questionImageFile
                }
                this.getImgUrlByAliId(data, interactiveItem, 'questionImageFileUrl');
              }
              if(interactiveItem.firstFileId) {
                let data = {
                  ImageId: interactiveItem.firstFileId
                }
                this.getImgUrlByAliId(data, interactiveItem, 'firstFile');
              }
              if(interactiveItem.secondFileId) {
                let data = {
                  ImageId: interactiveItem.secondFileId
                }
                this.getImgUrlByAliId(data, interactiveItem, 'secondFile');
              }
              if(interactiveItem.thirdFileId) {
                let data = {
                  ImageId: interactiveItem.thirdFileId
                }
                this.getImgUrlByAliId(data, interactiveItem, 'thirdFile');
              }
              if(interactiveItem.fourthFileId) {
                let data = {
                  ImageId: interactiveItem.fourthFileId
                }
                this.getImgUrlByAliId(data, interactiveItem, 'fourthFile');
              }

              if(interactiveItem.questionAudioFile) {
                interactiveItem.answerVoice = interactiveItem.questionAudioFile
              }
            })
          }
          // if(item.iamgeAFile) {
          //   let data = {
          //     ImageId: item.iamgeAFile
          //   }
          //   this.getImgUrlByAliId(data, item, 'firstFileId');
          // }
          // if(item.iamgeBFile) {
          //   let data = {
          //     ImageId: item.iamgeBFile
          //   }
          //   this.getImgUrlByAliId(data, item, 'secondFileId');
          // }
          // item.imageUrl = `http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${item.contentImageFile}`
          item.voiceName = item.contentAudioFile
          
          // if(item.iamgeAFile) {
          //   item.firstFileId = `http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${item.iamgeAFile}`
          // }
          // if(item.iamgeBFile) {
          //   item.secondFileId = `http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${item.iamgeBFile}`
          // }
        })
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 编辑提交
    submitEdit(rowData) {

      let data = this.formData

      data.bmOnlineSubjectContents.forEach((item, index) => {
        if(item.hasInteractive) {
          item.isInteractive = '1'
        }else{
          item.isInteractive = '0'
        }
        item.sort = index + 1;

        if(!item.bmOnlineSubjectContentExitList) {
          item.bmOnlineSubjectContentExitList = [];
        }else{
          item.bmOnlineSubjectContentExitList.forEach((interactiveItem, interactiveIndex) => {
            interactiveItem.sort = interactiveIndex + 1
          })
        }
      })

      console.log(data)
      // return false

      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        this.initData();
        this.popupState.showStatus = false;
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 表格删除
    tableDelete(rowData) {
      console.log(rowData)
      let subjectId = rowData.row.subjectId;
      let data = {
        id: subjectId,
      }

      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formGet({
          API: 'deleteById',
          data: data
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initData();
        }).catch(err => {
          this.$message.error(err);
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      
      
    },

    // 更改交互
    changeInteractive(e, item) {
      console.log(e)
      if(!e) {
        item.iamgeAFile = '';
        item.iamgeBFile = '';
        item.questionAudioFile = '';
        item.trueAnswer = '';
      }

      if(!item.bmOnlineSubjectContentExitList) {
        let obj = {
          firstFileId: '',
          secondFileId: '',
          thirdFileId: '',
          fourthFileId: '',
          questionAudioFile: '',
        }
        item.bmOnlineSubjectContentExitList = [];
        item.bmOnlineSubjectContentExitList.push(obj);
      }
      
      console.log(item)


    },
    changeClass(e) {
      this.formData.subjectCode = ''
      if(e == 'jczs') {
        this.subjectList = this.subject1;
      }else{
        this.subjectList = this.subject2;
      }
    },

    addAnswerImgNum(item, type) {
      console.log(item)
      if(type == 'add') {
        if(item.showAnswerImgNumber == 2) {
          return;
        }
        item.showAnswerImgNumber --;
      }else{
        if(item.showAnswerImgNumber == 4) {
          return;
        }
        item.showAnswerImgNumber ++;
      }
    },

    // 加减交互
    addDelete(item, index, type) {
      if(type == 'add') {
        let obj = {
          firstFileId: '',
          secondFileId: '',
          thirdFileId: '',
          fourthFileId: '',
          sort: index + 1,
        }
        item.push(obj);
      }else{
        if(item.length == 1) {
          return;
        }
        item.splice(index, 1)
      }
    },

    changeAnswer(item, e) {
      if(e == 'C') {
        if(item.thirdFileId == '') {
          this.$message.error('请上传选项C')
          item.trueAnswer = '';
          return;
        }
      }
      if(e == 'D') {
        if(item.fourthFileId == '') {
          this.$message.error('请上传选项D')
          item.trueAnswer = '';
          return;
        }
      }
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.curPage = val;
      this.initData();
    }
    
  },
  computed: {
    ...mapState([
    ]),
    // ...mapGetters(["selectedIds"])
  },
  components: {
    adminTable,
    upLoadFile,
    uploadAliyun,
  },
}

</script>